<template>
    <div class="publicpageview">
        <div class="publicformview">
            <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="日期：" prop="incomeDate">
                          <el-date-picker clearable size="small"
                                          v-model="listQuery.incomeDate"
                                          type="date"
                                          value-format="yyyy-MM-dd"
                                          placeholder="选择开始时间">
                          </el-date-picker>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="4">-->
<!--                        <el-form-item label="审核标记：" prop="status">-->
<!--                            <el-select v-model="listQuery.status" clearable>-->
<!--                                <el-option label="启用" value="0" key="1"></el-option>-->
<!--                                <el-option label="禁用" value="1" key="0"></el-option>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                    <el-col :span="4">
                        <el-form-item label="区域：" prop="areaId">
                            <el-select v-model="listQuery.areaId" clearable >
                                <el-option v-for="item in areaList" :label="item.dname" :value="item.did"
                                    :key="item.did"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="部门：" prop="deptId">
                            <el-select v-model="listQuery.deptId" clearable>
                                <el-option v-for="item in houseAdminList" :label="item.aname" :value="item.aid"
                                    :key="item.aid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div>
                            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
                            <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="publitableview">
            <el-button type="primary" size="mini" @click="handleAddUser('add')">凭证录入</el-button>

            <el-button type="danger"  icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDeletes">删除</el-button>

            <el-table :data="list" border fit highlight-current-row size="mini" @selection-change="handleSelectionChange">
<!--                <el-table-column align="center" label="日期" prop="id"/>-->
<!--              <el-table-column align="center" label="凭证号" prop="id"/>-->
<!--                <el-table-column align="center" label="交租方式" prop="name"/>-->
<!--                <el-table-column align="center" label="摘要" prop="id"/>-->
<!--                <el-table-column align="center" label="科目名称" prop="id"/>-->
<!--                <el-table-column align="center" label="对方科目" prop="id"/>-->
<!--                <el-table-column align="center" label="借方金额" prop="id"/>-->
<!--                <el-table-column align="center" label="贷方金额" prop="id"/>-->
<!--                <el-table-column align="center" label="区房屋管理单位" prop="id"/>-->
<!--                <el-table-column align="center" label="管理部（分中心）" prop="id"/>-->
<!--                <el-table-column align="center" label="录入员" prop="id"/>-->
<!--                <el-table-column align="center" label="录入日期" prop="id"/>-->

<!--              <el-table-column label="ID" align="center" prop="id" />-->
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="凭证号" align="center" prop="voucherCodeIn" width="180"/>
              <el-table-column label="收租日期" align="center" prop="incomeDate" />
<!--              <el-table-column label="收租方式" align="center" prop="type" :formatter="hanldetype"/>-->
              <el-table-column label="收租方式" align="center" prop="payeename"/>
              <el-table-column label="区域" align="center" prop="areaName" />
              <el-table-column label="部门" align="center" prop="deptName" />
              <el-table-column label="银行存款" align="center" prop="bankCk" />
              <el-table-column label="银行名称" align="center" prop="bankName" />
              <el-table-column label="对方科目明细账" align="center" prop="dfkmDetail" />
              <el-table-column label="租金收入" align="center" prop="rentalIncome" />
              <el-table-column label="借方金额" align="center" prop="debitAmount" />
              <el-table-column label="贷方金额" align="center" prop="creditAmount" />
              <el-table-column align="center" label="录入员" prop="createBy"/>
              <el-table-column align="center" label="录入日期" prop="createTime"/>


                <el-table-column align="center" label="操作" width="180" fixed="right">
                    <template slot-scope="scope">
<!--                        <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'shenhe')"-->
<!--                            v-if="true">审核</el-button>-->
<!--                        <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'quxiaoshenhe')"-->
<!--                            v-else>取消审核</el-button>-->
                        <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'update')">修改</el-button>
<!--                        <el-button type="text" size="mini" @click="handleUpdate(scope.row,'details')">详情</el-button>-->
                        <el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="publicpaginationview">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    small></el-pagination>
            </div>
        </div>

        <el-dialog
            :title="isAdd == 'add' ? '凭证录入' : isAdd == 'update' ? '修改凭证'  : '银行租金凭证详情'"
            :visible.sync="dialogVisible" width="75%" :before-close="handleClose">
            <el-form :model="formData" ref="dataForm" class="demo-ruleForm" size="mini" :inline="true">

                <el-row :gutter="20" style="padding: 0 20px;">

                    <el-col :span="6">
                        <el-form-item label="日期：" prop="incomeDate">
                            <el-date-picker v-model="formData.incomeDate" type="date" placeholder="年/月/日">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="交租方式：" prop="type">
<!--                            <el-select v-model="formData.type" :disabled="true">-->
<!--                              <el-option-->
<!--                                  v-for="item in typelist"-->
<!--                                  :key="item.id"-->
<!--                                  :label="item.label"-->
<!--                                  :value="item.id">-->
<!--                              </el-option>-->
<!--                            </el-select>-->
                          <el-input v-model="formData.payeename" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="区域：" prop="districtId">
                            <el-select v-model="formData.areaId">
                                <el-option v-for="item in areaList" :label="item.dname" :value="item.did"
                                    :key="item.did"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="部门" prop="houseAdminId">
                            <el-select v-model="formData.deptId">
                                <el-option v-for="item in houseAdminList" :label="item.aname" :value="item.aid"
                                    :key="item.aid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <div class="tableView">
                    <div class="title">银行租金收入凭证录入窗口</div>

                    <div style="padding: 0 20px;margin-top: 10px;">
                        <el-row>
                            <el-col :span="3">类别</el-col>
                            <el-col :span="4">摘要</el-col>
                            <el-col :span="3">科目名称</el-col>
                            <el-col :span="4">科目明细</el-col>
                            <el-col :span="5">借方金额</el-col>
                            <el-col :span="5">贷方金额</el-col>
                        </el-row>
                        <el-row style="border-bottom: none;">
                            <el-col :span="3">银行存款</el-col>
                            <el-col :span="4" style="height: 49px;">
                                <el-form-item prop="key">
                                    <el-input v-model="formData.bankCk"></el-input>
                                </el-form-item></el-col>
                            <el-col :span="3">银行名称</el-col>
                            <el-col :span="4" style="height: 49px;">
                                <el-form-item prop="status">
                                    <el-select v-model="formData.bankName" style="width: 178px;" clearable>
                                      <el-option v-for="item in banklist" :label="item.label" :value="item.label"
                                                 :key="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                              <!--                              贷方金额-->
                              <el-form-item prop="key">
                                <el-input v-model="formData.creditAmount"></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="5">
                              <!--                              借方金额-->
                              <el-form-item prop="key">
                                <el-input v-model="formData.debitAmount"></el-input>
                              </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>

                            <el-col :span="3">对方科目明细账</el-col>
                            <el-col :span="4">
                                <el-form-item prop="key">
                                    <el-input v-model="formData.dfkmDetail"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="3">租金收入</el-col>
                            <el-col :span="4">
                                <el-form-item prop="key">
                                    <el-input v-model="formData.rentalIncome"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item prop="key">
                                    <el-input v-model="formData.debitAmount"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item prop="key">
                                    <el-input v-model="formData.creditAmount"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="7">凭证号：{{formData.voucherCodeIn}}</el-col>

                            <el-col :span="7">录入员：{{formData.createBy}}</el-col>

                            <el-col :span="10">录入日期：{{formData.createTime}}</el-col>
                        </el-row>
                    </div>

                </div>

            </el-form>
            <span slot="footer" class="dialog-footer">

                <el-button @click="handleClose" size="medium" v-if="isAdd == 'shenhe' || isAdd == 'quxiaoshenhe'">返
                    回</el-button>
                <el-button type="primary" @click="handleClose" size="medium" v-if="isAdd == 'details'">返
                    回</el-button>

                <el-button type="primary" @click="handleSubmitClick" size="medium" v-else>{{isAdd == 'add' ? '保 存' :
                    isAdd ==
                    'update' ? '保 存' : isAdd == 'shenhe' ? '审 核' : '取消审核'}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {addDetails, delDetails, listDetails, updateDetails} from "@/api/caiwu/cwRentalIncomeDetails";

let arr = [];
let treeArr = [];

import { listResource, allocResource } from '@/api/index'
import { Message } from 'element-ui'
import { getArea, getHouseAdmin, getBlockGroup, getBlockByGroup, upload } from '@/api/common'
import { listAll } from '@/api/repair'
import moment from 'moment';
import {deleteRole} from "@/api/system";
import * as dateUils from "@/utils/dateUtils";
export default {
    name: "AccommodationManagementIndex",

    data() {
        return {
            listQuery: {
                pageNum: 1,
                pageSize: 10,
              type:1,
              incomeDate: null,
              areaId: null,
              deptId: null
            },

          // 选中数组
          ids: [],
          // 非多个禁用
          multiple: true,
            total: 0,

            list: [

            ],
            dialogVisible: false,
            isAdd: 'add',
            formData: {
               type:1,
              payeename:"划转",
            },
            areaList: [],
            houseAdminList: [],
            houseFormAdminList: [],
            typelist:[{id:1,label:'银行'},{id:2,label:'POS'},{id:3,label:'微信'}],
            banklist:[{id:1,label:'天津银行第一中心支行'},{id:2,label:'天津银行第六中心支行'}]

        };
    },

    computed: {},
    watch:{
    'formData.areaId'(val){
      var str1="";
      var str2="";
      var str3="划转";
      for(var i in this.areaList){
        if(this.areaList[i].did===val){
          str1=this.areaList[i].dname
        }
      }
      for(var i in this.houseAdminList){
        if(this.houseAdminList[i].aid===this.formData.deptId){
          str2=this.houseAdminList[i].aname
        }
      }

     this.formData.bankCk=str1+str2+str3
     this.formData.dfkmDetail=str1+str2+str3
    },
      'formData.deptId'(val){
        var str1="";
        var str2="";
        var str3="划转";
        for(var i in this.areaList){
          if(this.areaList[i].did===this.formData.areaId){
            str1=this.areaList[i].dname
          }
        }
        for(var i in this.houseAdminList){
          if(this.houseAdminList[i].aid===val){
            str2=this.houseAdminList[i].aname
          }
        }

        this.formData.bankCk=str1+str2+str3
        this.formData.dfkmDetail=str1+str2+str3
      },
    },
    mounted() {
        this.getList();
        this.getCommon();
        this.getHouseAdmin()
      this.getFormHouseAdmin()
    },


    methods: {

        getCommon() {
            getArea().then(res => {
                this.areaList = res.data
            })
        },

        handleQuchange(val) {
            this.listQuery.houseAdminId = null;
            if (val) {
                this.getHouseAdmin(val);

            } else {
                this.houseAdminList = [];
            }
        },

        handleFormQuchange(val) {
            this.formData.houseAdminId = null;
            if (val) {
                this.getFormHouseAdmin(val);

            } else {
                this.houseFormAdminList = [];
            }
        },

        getHouseAdmin(val) {
            getHouseAdmin({ DID: val, pageNum: 1, pageSize: 100000 }).then(res => {
                this.houseAdminList = res.data.list;
            })
        },
        getFormHouseAdmin(val) {
            getHouseAdmin({ DID: val, pageNum: 1, pageSize: 100000 }).then(res => {
                this.houseFormAdminList = res.data.list;
            })
        },

        handleSubmitClick() {
            const { formData } = this;
            if (this.isAdd == 'add') {
              console.log("add",this.formData)
              addDetails(this.formData).then(response => {
                Message({
                  message:  '操作成功',
                  type: "success",
                  duration: 3 * 1000,
                });
                this.dialogVisible = false;
                this.getList()
              })
            }
            if (this.isAdd == 'update' || this.isAdd == 'details') {
              updateDetails(this.formData).then(response => {
                Message({
                  message:  '操作成功',
                  type: "success",
                  duration: 3 * 1000,
                });
                this.dialogVisible = false;
                this.getList()
              })
            }

        },

        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },

        handleSearch() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        getList() {
            // listAll(this.listQuery).then((response) => {
            //     this.list = response.data.list;
            //     this.total = response.data.total;
            // });

          listDetails(this.listQuery).then(response=>{
            this.list = response.data.list;
            this.total = response.data.total;
          })
        },
        resetForm(val) {

            this.$refs[val].resetFields();
            this.listQuery.pageNum = 1;
        },

        handleAddUser(type) {
            this.isAdd = 'add';
            this.dialogVisible = true;
            this.formData= {
            type:1,
              payeename:"划转",
              createBy:localStorage.getItem('username'),
              createTime:dateUils.getCurrentDate()
          }
        },

        handleClose() {
            this.resetForm("dataForm");
            this.dialogVisible = false;
        },

        async handleUpdate(currentData, type) {
            this.isAdd = type;
            this.dialogVisible = true;
            //   一定要在打开弹窗前 再赋值 不然resetFiles没用
            await this.handleFormQuchange(currentData.districtId)


            this.$nextTick(() => {
                this.formData = { ...currentData, status: String(currentData.status) };

            });
        },

        handleDelete(id) {
            this.$confirm(
                "此操作将删除该条内容，请确认是否继续操作？",
                "删除提示",
                {
                    confirmButtonText: "保 存",
                    cancelButtonText: "取 消",
                    type: "warning",
                }
            )
                .then(() => {
                  delDetails(id).then(res => {
                        Message({
                            message: '操作成功',
                            type: "success",
                            duration: 5 * 1000,
                        });
                        this.getList();
                    })
                })
                .catch(() => { });
        },

      /** 删除按钮操作 */
      handleDeletes(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delDetails(ids);
        }).then(() => {
          this.getList();
          Message({
            message: '操作成功',
            type: "success",
            duration: 5 * 1000,
          });
        })
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      hanldetype(row){
          if(row.type==1){
            return "银行"
          }
        if(row.type==2){
          return "POS"
        }
        if(row.type==3){
          return "微信"
        }
      }
    },
};
</script>

<style scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 180px;
}

::v-deep .el-dialog__body {
    padding: 30px 0;

}

.tableView {
    width: 100%;
    background: #F7F7F7;
    padding-top: 20px;
    padding-bottom: 20px;

    .title {

        font-family: SourceHanSansSC, SourceHanSansSC;
        font-weight: bold;
        font-size: 16px;
        color: #008C93;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }

    .el-row {
        text-align: center;
        height: 50px;
        line-height: 50px;
        border: 1px solid #E9E9E9;
        background: #fff;

        .el-col {
            height: 50px;
            border-right: 1px solid #E9E9E9;
        }

        .el-col:last-of-type {
            border-right: none;
        }
    }

    .el-row:first-of-type {
        border-bottom: none;
        background: none;
    }

    .el-row:last-of-type {
        border-top: none;

        .el-col {
            text-align: left;
            padding-left: 58px;
        }
    }

    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
        margin-bottom: 0;
    }

    ::v-deep .el-form-item--mini .el-form-item__content,
    .el-form-item--mini .el-form-item__label {
        line-height: 50px;
    }



}
</style>
